项目瘦身：TailwindCSS 集成与原子化 CSS 方案对比
概述
模板项目默认使用 UnoCSS 作为原子化 CSS 方案。考虑到部分开发者偏好 TailwindCSS，本节在模板的 CSS 目录中提供 TailwindCSS 集成方案，并对比两种方案的差异。
方案对比
UnoCSS vs TailwindCSS
| 维度 | UnoCSS | TailwindCSS |
|---|---|---|
| 包体积 | 极小（~5KB） | 较大（~30KB 基础） |
| JIT 编译 | 原生支持，极快 | 支持（v3+），速度略慢 |
| 语法兼容 | 兼容 Tailwind/Windi 语法 | 自有语法体系 |
| 生态成熟度 | 较新，生态发展中 | 成熟，社区庞大 |
| 维护状态 | 活跃维护 | 稳定维护 |
| 自定义能力 | 灵活的 Preset 系统 | tailwind.config.js 配置 |
性能对比
UnoCSS 官方 Benchmarks:
- UnoCSS: ~5ms (最快)
- TailwindCSS JIT: ~15ms
- WindiCSS: ~20ms (已停止维护)
text
TailwindCSS 集成
安装依赖
pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
bash
配置文件
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {
primary: 'var(--el-color-primary)',
success: 'var(--el-color-success)',
warning: 'var(--el-color-warning)',
danger: 'var(--el-color-danger)',
},
},
},
plugins: [],
}
typescript
PostCSS 配置
// postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
javascript
入口样式
// src/assets/styles/tailwind.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
scss
// src/main.ts
import './assets/styles/tailwind.scss'
typescript
Vite 配置集成
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default defineConfig({
css: {
postcss: {
plugins: [
tailwindcss(),
autoprefixer(),
],
},
},
plugins: [vue()],
})
typescript
与 Element Plus 的整合
TailwindCSS 的 base 层可能与 Element Plus 的默认样式冲突。解决方案：
// tailwind.config.js
export default {
// 使用 preflight: false 禁用基础样式重置
corePlugins: {
preflight: false, // 不重置 Element Plus 的默认样式
},
}
typescript
或者使用 CSS 变量桥接两套设计系统：
// tailwind.config.js
theme: {
extend: {
spacing: {
'el-sm': '8px', // 对齐 Element Plus 的 small size
'el-md': '16px', // 对齐 Element Plus 的 default size
'el-lg': '24px', // 对齐 Element Plus 的 large size
},
},
}
typescript
模板目录结构
templates/
└── base/
└── css/
├── unocss/ # UnoCSS 方案
│ ├── uno.config.ts
│ └── src/assets/styles/uno.scss
└── tailwindcss/ # TailwindCSS 方案
├── tailwind.config.js
├── postcss.config.js
└── src/assets/styles/tailwind.scss
text
实践要点
- UnoCSS 在性能和体积上优于 TailwindCSS，课程项目推荐使用 UnoCSS
- TailwindCSS 生态更成熟，社区资源更丰富，企业项目使用广泛
- 两种方案在同一项目中不应混用，选择其中一种
- 与 Element Plus 整合时注意关闭 TailwindCSS 的
preflight，避免样式覆盖 - WindiCSS 已停止维护，不建议在新项目中使用
↑